<template>
<view>
	<view class="p-50 p-t-30 left" v-if="isLoading">
		<text class="ts-40 tb wa left">
			<text class="tc-green">君能</text>e站
		</text>
		<br>
		<text class="ts-24 wa left m-t-5">
			<text class="tc-gray">司机你好，请先创建车辆</text>
		</text>
		<view class="form-item" style="margin-top: 55rpx;">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.brand" :maxlength="5" placeholder="填写车辆品牌"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.brand.length }}/</span>5
			</view>
		</view>
		<view class="form-item">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.model" :maxlength="10" placeholder="填写车辆型号"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.model.length }}/</span>10
			</view>
		</view>
		<view class="form-item">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.vehicle_layout" :maxlength="10" placeholder="填写车辆牌照"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.vehicle_layout.length }}/</span>10
			</view>
		</view>
		<view class="form-item">
			<input placeholder-class="placeholder-color" class="form-input" type="text" v-model="accountInfo.driving_license_number" :maxlength="20" placeholder="填写行驶证号"/>
			<view class="form-count">
				<span class="full-count">{{ accountInfo.driving_license_number.length }}/</span>20
			</view>
		</view>
		<view class="form-select">
			<text class="tc-gray form-text">选择车辆类型</text>
			<view class="form-select-item ts-26" :class="active===key ? 'active' : ''" v-for="(value, key) in carsType" :key="key" @click="selectCarType(key)">{{value}}</view>
		</view>
		<view class="form-submit" @click="submit()">
			完成创建
		</view>
		<xy-tabbar />
	</view>
</view>
</template>
<script>
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar
		},
		data() {
			return {
				isLoading: false, // 控制加载动画的显示和隐藏
				carsType: {},
				active: "",
				accountInfo:{
					user_id: '3',
					// token: '197ceb9c-3144-4c79-9be0-7886fc91c0e1',
					brand:'',
					model:'',
					vehicle_layout:'',
					driving_license_number:'',
					vehicle_type:''
				},
			}
		},
		onShow() {
			this.isLoading = false; 
			this.carNumber()
		},
		onLoad() {
			this.$api.get({
				url: '/car/car/getVehicleTypeList',
				success: res => {
					this.carsType = res
					this.active = Object.keys(this.carsType)[0]
				}
			});
			
		},
		methods: {
			carNumber() {
				this.$api.get({
					url: '/car/car/getCarlist',
					loadingTip:'加载中...',
					data: {},
					success: res => {
						this.isLoading = false; // 隐藏加载动画
						if(res.length > 0) {
							uni.navigateTo({
								url: '/pages/index?id='+res[0].id
							})
							// 默认选中第一个车辆
							this.$store.dispatch('common/switchCar', res[0].id)
						} else {
							this.isLoading = true; 
						}
					}
				});
			},
			selectCarType(key) {
				this.active = key
			},
			submit() {
				// console.log(this.accountInfo)
				this.accountInfo.vehicle_type = this.active
				this.$api.post({
					url: '/car/car/add',
					loadingTip:'加载中...',
					data: this.accountInfo,
					success: res => {
						this.$xyfun.msg('添加成功');
						this.$xyfun.to('/pages/index');
					}
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.form-submit {
		margin: 35rpx 0 50rpx;
		width: 649rpx;
    	height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0,86,80,1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}
	.form-item {
		width: 100%;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 15rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count {
				font-size: 34rpx;
			}
		}
	}
	.form-select {
		width: 627rpx;
		margin-top: 35rpx;
		padding: 20rpx 10rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		float: left;
		.form-text {
			width: 580rpx;
			float: left; 
			padding: 10rpx 20rpx 18rpx;
		}
		.form-select-item {
			width: 164rpx;
			height: 90rpx;
			border-radius: 15rpx;
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			float: left;
			margin: 15rpx 40rpx 15rpx 0;
			text-align: center;
			line-height: 85rpx;
			color: rgba(135,135,135,0.48);
			background-color: rgba(187,187,187,0.09);
		}
		.form-select-item:nth-child(3n+2) {
			margin-left: 21rpx;
		}
		.form-select-item:nth-child(3n+4) {
			margin-right: 0rpx;
		}
		.active {
			border: 1rpx solid rgba(0,86,80,0.72);
			color: rgba(0,86,80,0.72);
			background-color: white;
		}
	}
</style>